<template>
  <div>
    我是cp2组件
    <div>store in the cp2: {{ $store.state.userInfo }}</div>
    <div>通过计算属性显示 userInfo: {{ uinfo }}</div>
    <div>辅助函数的使用: {{ userInfo }} {{ ct }}</div>
    <button @click="showStore">我是cp2的按钮</button>
    <button @click="changeByAction">修改用户的m名字</button>
    <div>getter dbCt: {{ $store.getters.dbCt }}</div>
    <div>version in mod waimai: {{ $store.state.waimai.version }}</div>
    <button @click="changeVersion">修改waimai模块的版本号</button>
  </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {};
  },
  computed: {
    uinfo() {
      return this.$store.state.userInfo;
    },
    //  通过mapState 我们可以快速的使用vuex当中的state
    ...mapState(['userInfo', 'ct']),
  },
  methods: {
    changeVersion() {
      // commit('命名空间为true的模块名称/mutation函数名称')
      // 精确的调用某个模块当中指定的mutation函数
      // 如果没有命名空间 准么所有的模块当中的同名函数都会执行
      this.$store.commit('waimai/fn1');
    },
    showStore() {
      // 在配置api当中 通过 this就可以访问  $store对象
      console.log('store in cp2', this.$store);
    },
    increMoney() {
      // 调用store对象上面的commit方法可以触发store当中的对应的mutations函数
      // commit('mutations当中对应的函数名',传参)
      this.$store.commit('changeUserMoney', 50);
      //   this.$store.state.userInfo.money += 50;
    },
    changeByAction() {
      // 通过 store对象的 dispatch方法可以触发 actions里面指定的方法
      this.$store.dispatch('changeName', 'kfc');
    },
  },
};
</script>
